<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Minimalist Sidebar</title>
  <style>
    :root {
      --bg-0: #0e0f12;
      --bg-1: #121317;
      --bg-2: #171a1f;
      --bg-3: #0b0c0f;
      --surface: #14161b;
      --border: #22252c;
      --text-0: #f3f4f6;
      --text-1: #c7c9d1;
      --text-2: #8f93a3;
      --brand: #6e78ff;
      --accent: #9aa0ff;
      --success: #22c55e;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      color: var(--text-0);
      background: var(--bg-0);
    }

    .app {
      display: grid;
      grid-template-columns: 64px 320px 1fr;
      min-height: 100vh;
    }

    /* Left rail */
    .rail {
      background: var(--bg-3);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
    }
    .rail .spacer { flex: 1; }
    .icon-btn {
      width: 40px; height: 40px;
      border-radius: 12px;
      display: grid; place-items: center;
      color: #cbd5e1; background: transparent;
      border: 1px solid transparent;
      cursor: pointer;
    }
    .icon-btn.active { background: var(--surface); color: var(--text-0); border-color: var(--border); }
    .icon-btn:hover { background: #15171c; }
    .icon-btn svg { width: 20px; height: 20px; stroke-width: 1.8; }

    /* Sidebar */
    .sidebar {
      background: var(--bg-1);
      border-right: 1px solid var(--border);
      padding: 16px;
    }
    .sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .title {
      font-weight: 600;
      letter-spacing: .2px;
    }

    .search {
      display: flex; align-items: center; gap: 8px;
      background: var(--surface);
      border: 1px solid var(--border);
      padding: 10px 12px;
      border-radius: 12px;
      color: var(--text-1);
    }
    .search input {
      flex: 1; border: none; outline: none;
      background: transparent; color: var(--text-0);
      font-size: 14px;
    }
    .search svg { width: 18px; height: 18px; }

    .section-title {
      color: var(--text-2);
      font-size: 12px;
      letter-spacing: .02em;
      margin: 18px 0 8px;
    }

    .nav-list { display: flex; flex-direction: column; gap: 6px; }
    .nav-item {
      display: grid; grid-template-columns: 22px 1fr 18px; align-items: center;
      gap: 10px; padding: 10px 12px;
      border-radius: 10px; color: var(--text-1);
      cursor: pointer;
    }
    .nav-item:hover { background: #15171c; }
    .nav-item.active { background: #1a1d24; color: var(--text-0); }
    .nav-item .ico svg { width: 18px; height: 18px; }
    .nav-item .chev svg { width: 16px; height: 16px; color: var(--text-2); }

    /* Main content placeholder */
    .content {
      background: linear-gradient(180deg, rgba(20,22,27,.6), rgba(20,22,27,.2));
      display: grid; place-items: center;
    }
    .content-card {
      width: min(800px, 80%);
      border: 1px solid var(--border);
      border-radius: 16px;
      background: rgba(26,29,36,.4);
      padding: 24px;
    }
    .content-card h2 { margin: 0 0 12px; font-size: 20px; }
    .content-card p { margin: 0; color: var(--text-1); }

    /* Utility */
    .muted { color: var(--text-2); }
    .brand { color: var(--brand); }
    .star { color: #ffd166; }
  </style>
</head>
<body>
  <div class="app">
    <!-- Left icon rail -->
    <aside class="rail">
      <button class="icon-btn active" aria-label="dashboard">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="3" width="7" height="7" rx="2"></rect><rect x="14" y="3" width="7" height="7" rx="2"></rect><rect x="3" y="14" width="7" height="7" rx="2"></rect><rect x="14" y="14" width="7" height="7" rx="2"></rect></svg>
      </button>
      <button class="icon-btn" aria-label="tasks">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 7h11"/><path d="M9 12h11"/><path d="M9 17h11"/><path d="M5 7l-2 2 2 2 4-4"/></svg>
      </button>
      <button class="icon-btn" aria-label="reports">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 4h16v16H4z"/><path d="M8 16v-6"/><path d="M12 16V8"/><path d="M16 16v-3"/></svg>
      </button>
      <button class="icon-btn" aria-label="team">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="9" cy="8" r="3"/><circle cx="17" cy="8" r="3"/><path d="M2 20c0-3.3 2.7-6 6-6"/><path d="M22 20c0-3.3-2.7-6-6-6"/></svg>
      </button>
      <div class="spacer"></div>
      <button class="icon-btn" aria-label="settings">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M19.4 15a7.9 7.9 0 0 0 0-6l2.1-1.7-2-3.5-2.6 1.1a7.9 7.9 0 0 0-5.8-2.4L10.1 0H7.9L7.1 2.5A7.9 7.9 0 0 0 1.3 4L-1 2.3 1 5.8 3.1 7.5a7.9 7.9 0 0 0 0 6L1 15.2l2 3.5 2.6-1.1a7.9 7.9 0 0 0 5.8 2.4l.8 2.5h2.2l.8-2.5a7.9 7.9 0 0 0 5.8-2.4l2.6 1.1 2-3.5-2.1-1.7z"/></svg>
      </button>
      <button class="icon-btn" aria-label="profile">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
      </button>
    </aside>

    <!-- Main sidebar -->
    <aside class="sidebar">
      <div class="sidebar-header">
        <div class="title">Dashboard</div>
        <div class="muted">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"><path d="M9 6l6 6-6 6"/></svg>
        </div>
      </div>

      <div class="search" role="search">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
        <input type="text" placeholder="Search tasks, projects..." />
      </div>

      <div class="section">
        <div class="section-title">Dashboard Types</div>
        <nav class="nav-list">
          <div class="nav-item active">
            <span class="ico">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12Z"/><circle cx="12" cy="12" r="3"/></svg>
            </span>
            <span>Overview</span>
            <span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 6l6 6-6 6"/></svg></span>
          </div>
          <div class="nav-item">
            <span class="ico">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 4h16v16H4z"/><path d="M8 8h8v8H8z"/></svg>
            </span>
            <span>Executive Summary</span>
            <span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 6l6 6-6 6"/></svg></span>
          </div>
          <div class="nav-item">
            <span class="ico">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 4h16v16H4z"/><path d="M7 7h4v4H7zM13 7h4v4h-4zM7 13h4v4H7zM13 13h4v4h-4z"/></svg>
            </span>
            <span>Operations Dashboard</span>
            <span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 6l6 6-6 6"/></svg></span>
          </div>
          <div class="nav-item">
            <span class="ico">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 20v-6"/><path d="M10 20v-10"/><path d="M16 20v-4"/><path d="M2 20h20"/></svg>
            </span>
            <span>Financial Dashboard</span>
            <span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 6l6 6-6 6"/></svg></span>
          </div>
        </nav>
      </div>

      <div class="section">
        <div class="section-title">Report Summaries</div>
        <nav class="nav-list">
          <div class="nav-item">
            <span class="ico">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="4" width="18" height="18" rx="3"/><path d="M8 2v4M16 2v4"/><path d="M7 12h10"/></svg>
            </span>
            <span>Weekly Reports</span>
            <span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 6l6 6-6 6"/></svg></span>
          </div>
          <div class="nav-item">
            <span class="ico star">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 17.3l-5.4 3.3 1.6-6.1L3 9.9l6.3-.5L12 3l2.7 6.4 6.3.5-5.2 4.6 1.6 6.1z"/></svg>
            </span>
            <span>Monthly Insights</span>
            <span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 6l6 6-6 6"/></svg></span>
          </div>
          <div class="nav-item">
            <span class="ico">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 2v20M2 12h20"/></svg>
            </span>
            <span>Quarterly Analysis</span>
            <span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 6l6 6-6 6"/></svg></span>
          </div>
        </nav>
      </div>

      <div class="section">
        <div class="section-title">Business Intelligence</div>
        <nav class="nav-list">
          <div class="nav-item">
            <span class="ico brand">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 20v-6l6-6 6 6v6"/><path d="M10 14l2-2 2 2"/></svg>
            </span>
            <span>Performance Metrics</span>
            <span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 6l6 6-6 6"/></svg></span>
          </div>
          <div class="nav-item">
            <span class="ico" style="color: var(--success)">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M3 17l6-6 4 4 7-7"/></svg>
            </span>
            <span>Predictive Analytics</span>
            <span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 6l6 6-6 6"/></svg></span>
          </div>
        </nav>
      </div>
    </aside>

    <!-- Main content area -->
    <main class="content">
      <div class="content-card">Object.values
        <h2>Overview</h2>
        <p class="muted">这里是主内容区域的占位卡片。侧边栏已按原型布局实现，包含搜索框、分组标题、条目样式与高亮状态。</p>
      </div>
    </main>
  </div>
</body>
</html>